/**
 * 首页视图组件
 * 功能：展示平台首页内容，包括：
 * 1. 轮播图展示
 * 2. 热门课程推荐
 * 3. 专业认证展示
 * 4. 名校风采展示
 * 5. 学习伙伴功能
 * 6. 底部信息展示
 */

<template>
  <div class="home-container">
    <div class="main-content">
      <!-- 轮播图组件 -->
      <MainBanner :banners="mainBanners" />

      <!-- 热门课程区域 -->
      <div class="section hot-courses">
        <div class="container">
          <HotCourseList />
        </div>
      </div>

      <!-- 专业认证区域 -->
      <div class="section certifications">
        <div class="container">
          <RecommendedCourseList />
        </div>
      </div>

      <!-- 名校风采区域 -->
      <div class="section universities">
        <div class="container">
          <div class="section-header">
            <div class="section-title">
              <span class="title-icon"></span>
              <h2>名校风采</h2>
            </div>
            <div class="more-link">全部835所合作高校 <i class="el-icon-arrow-right"></i></div>
          </div>
          
          <div class="university-list">
            <div v-for="(uni, index) in universities" :key="index" class="university-card">
              <div class="university-logo" :style="{backgroundImage: `url(${uni.logo})`}"></div>
              <div class="university-info">
                <h3 class="university-name">{{ uni.name }}</h3>
                <div class="university-stats">
                  <div class="stat">
                    <span class="count">{{ uni.courses }}</span>
                    <span class="label">门课程</span>
                  </div>
                  <div class="stat">
                    <span class="count">{{ uni.students }}</span>
                    <span class="label">名学生</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 学习伙伴区域 -->
      <div class="section study-partners">
        <div class="container">
          <div class="section-header">
            <div class="section-title">
              <span class="title-icon"></span>
              <h2>学习伙伴</h2>
            </div>
          </div>
          
          <div class="partner-feature">
            <div class="feature-content">
              <h3>寻找志同道合的学习伙伴</h3>
              <p>组建学习小组，共同进步，一起备考，互相监督学习进度</p>
              <div class="feature-stats">
                <div class="stat">
                  <span class="count">50万+</span>
                  <span class="label">学习小组</span>
                </div>
                <div class="stat">
                  <span class="count">300万+</span>
                  <span class="label">学习伙伴</span>
                </div>
              </div>
              <el-button type="primary">加入学习小组</el-button>
            </div>
            <div class="feature-image"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息区域 -->
    <div class="footer">
      <div class="container">
        <div class="footer-top">
          <div class="footer-logo">
            <div class="logo">EDU</div>
            <div class="site-name">教育共享平台</div>
          </div>
          <div class="footer-links">
            <div class="link-group">
              <h4>关于我们</h4>
              <a href="#">平台介绍</a>
              <a href="#">联系我们</a>
              <a href="#">合作机构</a>
              <a href="#">加入我们</a>
            </div>
            <div class="link-group">
              <h4>学习资源</h4>
              <a href="#">课程中心</a>
              <a href="#">专业认证</a>
              <a href="#">考试中心</a>
              <a href="#">学习资料</a>
            </div>
            <div class="link-group">
              <h4>帮助中心</h4>
              <a href="#">常见问题</a>
              <a href="#">使用指南</a>
              <a href="#">意见反馈</a>
              <a href="#">学习社区</a>
            </div>
            <div class="link-group">
              <h4>关注我们</h4>
              <a href="#">微信公众号</a>
              <a href="#">官方微博</a>
              <a href="#">官方B站</a>
              <a href="#">招聘信息</a>
            </div>
          </div>
          <div class="footer-qrcode">
            <div class="qrcode-img"></div>
            <p>扫码下载APP</p>
          </div>
        </div>
        
        <div class="footer-bottom">
          <div class="copyright">
            <p>© 2024 教育共享平台 版权所有</p>
            <p>京ICP备12345678号-1 | 京公网安备11010502030123 | 营业执照</p>
          </div>
          <div class="footer-nav">
            <a href="#">隐私政策</a>
            <span>|</span>
            <a href="#">用户协议</a>
            <span>|</span>
            <a href="#">免责声明</a>
            <span>|</span>
            <a href="#">侵权举报</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserName } from '@/api/user'
import { getUnreadNotification } from '@/api/user'
import eventBus from '@/utils/eventBus'
import HotCourseList from '@/components/HotCourseList.vue'
import RecommendedCourseList from '@/components/RecommendedCourseList.vue'
import MainBanner from '@/components/common/MainBanner.vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'HomeView',
  components: {
    HotCourseList,
    RecommendedCourseList,
    MainBanner
  },
  data() {
    return {
      userName: '',                    // 用户名
      avatarUrl: '',                   // 用户头像URL
      mainBanners: [                   // 轮播图数据
        {
          title: '探索知识的海洋',
          desc: '来自全国顶尖高校的优质课程',
          buttonText: '立即体验',
          bgImage: 'https://edu-image.nosdn.127.net/C7F81100F90F8DB85704C901C4CFFC9D.jpg'
        },
        {
          title: '突破自我，提升实力',
          desc: '专业认证课程，提升就业竞争力',
          buttonText: '了解更多',
          bgImage: 'https://edu-image.nosdn.127.net/249dc9d7-fbd5-41fb-8e1d-a92c79be05c8.jpg'
        },
        {
          title: '名师指导，助力成长',
          desc: '知名教授在线授课，答疑解惑',
          buttonText: '现在开始',
          bgImage: 'https://edu-image.nosdn.127.net/30F964990D6937557C05DD9EDD6C5BA3.jpg'
        }
      ],
      universities: [                  // 合作高校数据
        {
          name: '北京大学',
          logo: 'https://edu-image.nosdn.127.net/F0050BF5BEF9FDD045ABE74B5CD31331.png',
          courses: '156',
          students: '85万'
        },
        {
          name: '清华大学',
          logo: 'https://edu-image.nosdn.127.net/11E4F7807DFE755A3DF0255836B5B0A0.png',
          courses: '184',
          students: '92万'
        },
        {
          name: '浙江大学',
          logo: 'https://edu-image.nosdn.127.net/27E9A52DA06E9012AD32EDCA5466756D.png',
          courses: '143',
          students: '76万'
        },
        {
          name: '复旦大学',
          logo: 'https://edu-image.nosdn.127.net/F19C4691A3DF5C2A9C7E5FE28CF0B4D8.png',
          courses: '135',
          students: '68万'
        },
        {
          name: '南京大学',
          logo: 'https://edu-image.nosdn.127.net/4DC9BE7D9E5B6E486844FE8F89B08BF3.png',
          courses: '127',
          students: '65万'
        }
      ]
    }
  },
  mounted() {
    this.fetchUserName()
    this.fetchUnreadNotifications()
  },
  methods: {
    /**
     * 获取用户信息
     * 从服务器获取当前用户的基本信息，包括用户名和头像
     */
    async fetchUserName() {
      try {
        const res = await getUserName()
        
        if (res.code === 200) {
          const userData = res.data;
          
          // 设置用户名
          this.userName = userData.userName || '用户';
          
          // 设置头像
          if (userData.ossImages && userData.ossImages.length > 0) {
            const headImage = userData.ossImages.find(img => img.relationType === 'head');
            if (headImage) {
              this.avatarUrl = headImage.url;
            }
          }
        }
      } catch (error) {
        ElMessage.error('获取用户信息失败')
      }
    },

    /**
     * 获取未读通知数量
     * 从服务器获取未读通知数量并触发更新事件
     */
    async fetchUnreadNotifications() {
      try {
        const notificationResponse = await getUnreadNotification()
        if (notificationResponse && notificationResponse.code === 200) {
          eventBus.emit('notification-updated')
        }
      } catch (error) {
        ElMessage.error('获取未读通知数量失败')
      }
    },

    /**
     * 处理用户命令
     * @param {string} command - 用户操作命令
     */
    handleCommand(command) {
      if (command === 'logout') {
        // 清除token
        sessionStorage.removeItem('token')
        localStorage.removeItem('token')
        // 跳转到登录页
        this.$router.push('/login')
      } else if (command === 'userInfo') {
        // 跳转到个人中心
        this.$router.push('/user')
      }
    },

    /**
     * 跳转到添加课程页面
     */
    goToAddCourse() {
      this.$router.push('/course/create')
    }
  }
}
</script>

<style scoped>
/* 全局容器样式 */
.home-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  font-family: "Microsoft YaHei", sans-serif;
  position: relative;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 通用部分样式 */
.section {
  margin-bottom: 50px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-icon {
  width: 4px;
  height: 20px;
  background-color: #1c86ee;
  border-radius: 2px;
}

.section-title h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

.more-link {
  font-size: 14px;
  color: #1c86ee;
  cursor: pointer;
}

/* 名校风采样式 */
.university-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.university-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.university-card:hover {
  transform: translateY(-5px);
}

.university-logo {
  height: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f5f7fa;
  padding: 10px;
}

.university-info {
  padding: 15px;
}

.university-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

.university-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.university-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.university-stats .count {
  font-weight: 500;
  color: #1c86ee;
  font-size: 16px;
}

.university-stats .label {
  font-size: 12px;
  color: #999;
}

/* 学习伙伴样式 */
.partner-feature {
  display: flex;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.feature-content {
  flex: 1;
  padding: 40px;
}

.feature-content h3 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.feature-content p {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.feature-stats {
  display: flex;
  gap: 50px;
  margin-bottom: 30px;
}

.feature-stats .stat {
  display: flex;
  flex-direction: column;
}

.feature-stats .count {
  font-size: 28px;
  font-weight: 600;
  color: #1c86ee;
  margin-bottom: 5px;
}

.feature-stats .label {
  font-size: 14px;
  color: #666;
}

.feature-image {
  flex: 1;
  background-image: url('https://edu-image.nosdn.127.net/9e1e9c31-7b24-48c7-9bc1-5a9388417631.png');
  background-size: cover;
  background-position: center;
}

/* 底部样式 */
.footer {
  background-color: #2c3e50;
  color: #fff;
  padding: 50px 0 20px;
  margin-top: 60px;
}

.footer-top {
  display: flex;
  margin-bottom: 40px;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-right: 60px;
}

.footer-logo .logo {
  width: fit-content;
}

.footer-logo .site-name {
  color: white;
}

.footer-links {
  display: flex;
  gap: 60px;
  flex: 1;
}

.link-group h4 {
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 500;
}

.link-group a {
  display: block;
  color: #ccc;
  margin-bottom: 10px;
  text-decoration: none;
  transition: color 0.3s;
}

.link-group a:hover {
  color: #fff;
}

.footer-qrcode {
  text-align: center;
}

.qrcode-img {
  width: 120px;
  height: 120px;
  background-color: #fff;
  margin-bottom: 10px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright p {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 5px;
}

.footer-nav {
  display: flex;
  gap: 15px;
}

.footer-nav a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-nav span {
  color: #666;
}
</style>